<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">健康指标</view>
            <view class="right">
                <u-icon name="plus" size="32" color="#333" @click="addIndicator"></u-icon>
            </view>
        </view>
        
        <!-- 指标卡片 -->
        <view class="indicator-cards">
            <view class="card" v-for="(item, index) in indicatorList" :key="index">
                <view class="header">
                    <view class="name">{{item.name}}</view>
                    <view class="value" :class="item.status">{{item.value}}{{item.unit}}</view>
                </view>
                <view class="chart">
                    <canvas 
                        type="2d" 
                        :id="'chart' + index" 
                        class="chart-canvas"
                    ></canvas>
                </view>
                <view class="footer">
                    <view class="time">{{item.time}}</view>
                    <view class="actions">
                        <view class="action" @click="editIndicator(item)">
                            <u-icon name="edit" size="24" color="#666"></u-icon>
                            <text>编辑</text>
                        </view>
                        <view class="action" @click="deleteIndicator(item)">
                            <u-icon name="trash" size="24" color="#666"></u-icon>
                            <text>删除</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 无数据 -->
        <view class="empty" v-if="indicatorList.length === 0">
            <image src="/static/images/empty.png" mode="aspectFit"></image>
            <text>暂无健康指标记录</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            indicatorList: [
                {
                    id: 1,
                    name: '血压',
                    value: '120/80',
                    unit: 'mmHg',
                    status: 'normal',
                    time: '2024-03-15 08:00',
                    data: [
                        { time: '03-10', value: '125/85' },
                        { time: '03-11', value: '122/82' },
                        { time: '03-12', value: '118/78' },
                        { time: '03-13', value: '120/80' },
                        { time: '03-14', value: '115/75' },
                        { time: '03-15', value: '120/80' }
                    ]
                },
                {
                    id: 2,
                    name: '血糖',
                    value: '5.6',
                    unit: 'mmol/L',
                    status: 'normal',
                    time: '2024-03-15 08:00',
                    data: [
                        { time: '03-10', value: '5.8' },
                        { time: '03-11', value: '5.7' },
                        { time: '03-12', value: '5.5' },
                        { time: '03-13', value: '5.6' },
                        { time: '03-14', value: '5.4' },
                        { time: '03-15', value: '5.6' }
                    ]
                },
                {
                    id: 3,
                    name: '心率',
                    value: '75',
                    unit: '次/分',
                    status: 'normal',
                    time: '2024-03-15 08:00',
                    data: [
                        { time: '03-10', value: '78' },
                        { time: '03-11', value: '76' },
                        { time: '03-12', value: '74' },
                        { time: '03-13', value: '75' },
                        { time: '03-14', value: '73' },
                        { time: '03-15', value: '75' }
                    ]
                }
            ]
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        addIndicator() {
            uni.navigateTo({
                url: '/pages/health/indicator-edit'
            })
        },
        editIndicator(indicator) {
            uni.navigateTo({
                url: `/pages/health/indicator-edit?id=${indicator.id}`
            })
        },
        deleteIndicator(indicator) {
            uni.showModal({
                title: '提示',
                content: '确定要删除这条健康指标记录吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 删除记录
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success'
                        })
                    }
                }
            })
        },
        initCharts() {
            this.indicatorList.forEach((item, index) => {
                const query = uni.createSelectorQuery().in(this)
                query.select('#chart' + index)
                    .fields({ node: true, size: true })
                    .exec((res) => {
                        const canvas = res[0].node
                        const ctx = canvas.getContext('2d')
                        
                        // 设置canvas尺寸
                        const dpr = uni.getSystemInfoSync().pixelRatio
                        canvas.width = res[0].width * dpr
                        canvas.height = res[0].height * dpr
                        ctx.scale(dpr, dpr)
                        
                        // 绘制图表
                        this.drawChart(ctx, item.data)
                    })
            })
        },
        drawChart(ctx, data) {
            const width = 300
            const height = 150
            const padding = 20
            
            // 清空画布
            ctx.clearRect(0, 0, width, height)
            
            // 绘制坐标轴
            ctx.beginPath()
            ctx.moveTo(padding, padding)
            ctx.lineTo(padding, height - padding)
            ctx.lineTo(width - padding, height - padding)
            ctx.strokeStyle = '#E8E8E8'
            ctx.stroke()
            
            // 绘制数据点
            const xStep = (width - 2 * padding) / (data.length - 1)
            const yMin = Math.min(...data.map(item => parseFloat(item.value)))
            const yMax = Math.max(...data.map(item => parseFloat(item.value)))
            const yRange = yMax - yMin
            const yStep = (height - 2 * padding) / yRange
            
            ctx.beginPath()
            data.forEach((item, index) => {
                const x = padding + index * xStep
                const y = height - padding - (parseFloat(item.value) - yMin) * yStep
                
                if (index === 0) {
                    ctx.moveTo(x, y)
                } else {
                    ctx.lineTo(x, y)
                }
                
                // 绘制数据点
                ctx.beginPath()
                ctx.arc(x, y, 3, 0, Math.PI * 2)
                ctx.fillStyle = '#1890FF'
                ctx.fill()
            })
            
            // 绘制折线
            ctx.strokeStyle = '#1890FF'
            ctx.lineWidth = 2
            ctx.stroke()
        }
    },
    onReady() {
        this.initCharts()
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    padding: 20rpx;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .indicator-cards {
        .card {
            background-color: #fff;
            border-radius: 20rpx;
            margin-bottom: 20rpx;
            overflow: hidden;
            
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20rpx 30rpx;
                border-bottom: 2rpx solid #F7F7FA;
                
                .name {
                    font-size: 32rpx;
                    color: #333;
                    font-weight: bold;
                }
                
                .value {
                    font-size: 36rpx;
                    font-weight: bold;
                    
                    &.normal {
                        color: #52C41A;
                    }
                    
                    &.warning {
                        color: #FAAD14;
                    }
                    
                    &.danger {
                        color: #FF4D4F;
                    }
                }
            }
            
            .chart {
                height: 200rpx;
                padding: 20rpx;
                
                .chart-canvas {
                    width: 100%;
                    height: 100%;
                }
            }
            
            .footer {
                padding: 20rpx 30rpx;
                background-color: #F7F7FA;
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .time {
                    font-size: 24rpx;
                    color: #999;
                }
                
                .actions {
                    display: flex;
                    
                    .action {
                        display: flex;
                        align-items: center;
                        margin-left: 30rpx;
                        
                        text {
                            font-size: 24rpx;
                            color: #666;
                            margin-left: 6rpx;
                        }
                    }
                }
            }
        }
    }
    
    .empty {
        padding: 100rpx 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        image {
            width: 200rpx;
            height: 200rpx;
            margin-bottom: 20rpx;
        }
        
        text {
            font-size: 24rpx;
            color: #999;
        }
    }
}
</style> 